<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="index.css" />
    <script src="vue.js"></script>
    <script src="elementui.js"></script>
    <script src="axios.js"></script>
    <script src="common.js"></script>
</head>

<body>
    <div id="app">
        <el-button @click="showDialog('add')" type="primary" style="margin-bottom: 20px;">新增菜单</el-button>
        <el-dialog :title="dialogTitle" :visible.sync="showDialogFlag" width="30%">
            <el-form :model="currentMenu" label-width="80px">
                <el-form-item label="菜单id">
                    <el-input v-model="currentMenu.id" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="标题">
                    <el-input v-model="currentMenu.label"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="currentMenu.href"></el-input>
                </el-form-item>
                <el-form-item label="图标">
                    <el-input v-model="currentMenu.imgicon"></el-input>
                </el-form-item>
                <el-form-item label="父级id">
                    <el-input v-model="currentMenu.parentid"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showDialogFlag = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
        </el-dialog>

        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="菜单id" width="180">
            </el-table-column>
            <el-table-column prop="label" label="标题" width="180">
            </el-table-column>
            <el-table-column prop="href" label="地址">
            </el-table-column>
            <el-table-column prop="imgicon" label="图标">
            </el-table-column>
            <el-table-column prop="parentid" label="父级id">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                    <el-button @click="showDialog('edit', scope.row)" type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            tableData: [],
            showDialogFlag: false,
            isEdit: false,
            dialogTitle: '',
            currentMenu: {
                id: '',
                label: '',
                href: '',
                imgicon: '',
                parentid: ''
            }
        },
        methods: {
            init() {
                let that = this;
                axios.get(API + "menuList")
                    .then(function (response) {
                       //      console.log(response)
                        that.tableData = response.data;
                    })
            },
            handleClick(row) {
                let that = this;
                this.$confirm('确定删除此菜单?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get(API + "deleteMenu?id=" + row.id)
                        .then(function (response) {
                            // 从 tableData 中移除已删除的项
                            that.tableData = that.tableData.filter(item => item.id !== row.id);
                            that.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        })
                        .catch(function (error) {
                            console.error("删除失败", error);
                            that.$message.error('删除失败!');
                        });
                }).catch(() => {
                    that.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
            showDialog(action, row = {}) {
                if (action === 'add') {
                    this.isEdit = false;
                    this.dialogTitle = '新增菜单';
                    this.currentMenu = {
                        id: '',
                        label: '',
                        href: '',
                        imgicon: '',
                        parentid: ''
                    };
                } else if (action === 'edit') {
                    this.isEdit = true;
                    this.dialogTitle = '编辑菜单';
                    this.currentMenu = { ...row };
                }
                this.showDialogFlag = true;
            },
            submitForm() {
                let that = this;
                if (this.isEdit) {
                    axios.post(API + "updateMenu", this.currentMenu)
                        .then(function (response) {
                           // console.log(response);
                            // 更新 tableData 中的项
                            that.tableData = that.tableData.map(item => {
                                console.log(item.id, that.currentMenu.id);
                                if (item.id === that.currentMenu.id) {
                                    return that.currentMenu;
                                }
                                return item;
                            });
                            that.showDialogFlag = false;
                            that.$message({
                                type: 'success',
                                message: '更新成功!'
                            });
                        })
                        .catch(function (error) {
                            console.error("更新失败", error);
                            that.$message.error('更新失败!');
                        });
                } else {
                 // 新增菜单时，不传递 id
                 const { id, ...menuWithoutId } = this.currentMenu;
                    axios.post(API + "addMenu", menuWithoutId)
                        .then(function (response) {
                           // console.log(response);
                            // 从后端获取新的 id 并更新 tableData
                            const newMenu = { ...menuWithoutId, id: response.data.id };
                            that.tableData.push(newMenu);
                            that.showDialogFlag = false;
                            that.$message({
                                type: 'success',
                                message: '新增成功!'
                            });
                            location.href="memu1.html";
                        })
                        .catch(function (error) {
                            console.error("新增失败", error);
                            that.$message.error('新增失败!');
                        });
                }
            }
        },
        mounted() {
            this.init();
        }
    })
</script>

</html>